<template>
  <page-body bgImg=' ' safeAreaLeft>
    <view class="account pages font-B ">
      <nav-bar title='账号与安全' titleColor='#333'></nav-bar>
      <view style="height: 24px;"></view>
      <view class="account-item n-b jh-space-between jh-align-center">
        <view class="font-17 c-000">卡罗琳账号</view>
        <view class="font-17" style="color: #9FA0A0;">{{user.mobile || ''}}</view>
      </view>
      <view class="account-item n-b jh-space-between jh-align-center" @tap="$navigateTo('/pages/system/change-phone')">
        <view class="font-17 c-000">{{user.mobile || ''}}</view>
        <view class="jh-flex-center font-17" style="color: #9FA0A0;">
          <image class="margin-r10" style="width: 22px;height: 22px;display: block;" :src="ossDomain + '/icon-user2.png'"></image>
          登录手机
        </view>
      </view>
      <view class="account-item jh-space-between jh-align-center" @tap="$navigateTo('/pages/system/reset-password')">
        <view class="font-17 c-000">修改密码</view>
      </view>
    </view>
    <backBtn></backBtn>
  </page-body>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import backBtn from '@/components/back-btn/back'
  export default {
    components: {
      backBtn
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo,
      }),
    },
    data() {
      return {
        ossDomain: uni.ossDomain,
        user: {}
      }
    },
    mounted() {
      this.user = this.userInfo.user
    },
    methods: {
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    padding:0 30px;
    box-sizing: border-box;
  }
  .account{
    &-item{
      width: 100%;
      height: 50px;
      border: 1px solid #ddd;
      background-color: #fff;
      padding: 0 30px;
      box-sizing: border-box;
      &.n-b{
        border-bottom: 0;
      }
    }
  }
</style>
